<template>
	<view class="root safe-area-inset-bottom mb-6" :style="{ paddingTop: `24rpx` }">
		<uni-swipe-action>
			<block v-for="(card, index) in cards" :key="index">
				<label class="height-18" />
				<uni-swipe-action-item :right-options="options" @click="operation($event, index)">
					<view :style="{ margin: `0 24rpx` }" class="relative br-12 oh">
						<image
							class="bgc-eee absolute width-100percent height-100percent"
							:src="card.cardstyle.cover_image"
						/>
						<view
							:style="{
								zIndex: 1,
								padding: `44rpx`,
							}"
						>
							<text class="color-fff fs-28 fw-700">
								{{ card.name }}
							</text>
							<text class="color-fff fs-24 mt-30">
								{{ card.des }}
							</text>
							<label class="jc-sb mt-30">
								<text class="color-fff fs-40 fw-800">
									￥{{ Number(card.face).toFixed(2) }}
								</text>
								<text class="color-eee fs-28">
									实付金额：¥{{ Number(card.money).toFixed(2) }}
								</text>
							</label>
						</view>
					</view>
				</uni-swipe-action-item>
				<label class="height-18" />
			</block>

			<label v-if="!cards.length" class="jc-center fs-32 color-999 lh-5">
				当前暂未添加储值卡
			</label>
		</uni-swipe-action>
		<view
			class="bgc-fff jc-center fixed bottom-0 width-100percent safe-area-inset-bottom content-box"
			:style="{ zIndex: 2, height: `120rpx` }"
		>
			<navigator
				hover-class="tap-hover"
				:style="{
					margin: `0 24rpx`,
					backgroundImage: `linear-gradient(to right, #f45455, #ff7b6f)`,
				}"
				class="fs-34 color-fff fw-500 lh-90 br-12 text-center"
				url="/pages/businessBackground/SetStoreCard?mode=add"
			>
				添加
			</navigator>
		</view>
	</view>
</template>
<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue";
	import uniSwipeActionItem from "@/components/uni-swipe-action-item/uni-swipe-action-item.vue";

	@Component({ components: { uniSwipeAction, uniSwipeActionItem } })
	export default class GetStoreCard extends Vue {
		// component property
		cards: AnyObject[] = [];
		options: AnyObject[] = [
			{
				text: "编辑",
				style: {
					backgroundColor: "#007aff",
				},
			},
			{
				text: "删除",
				style: {
					backgroundColor: "#dd524d",
				},
			},
		];

		onShow() {
			uni.showLoading({ title: "Loading...", mask: true });

			this.$request.get("/index/shopCardList").then(({ data }) => {
				this.cards = data;
				uni.hideLoading();
			});
		}

		operation(e: AnyObject, index: number) {
			const { id } = this.cards[index];

			if (!e.index) {
				uni.navigateTo({
					url: `/pages/businessBackground/SetStoreCard?mode=edit&id=${id}`,
				});
				return;
			}

			this.$request.get("/index/del", { id }).then(({ msg: title }) => {
				this.cards.splice(index, 1);
				uni.showToast({ title });
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>